<template>
	<view>
		<view class="newRepairs-box">
			<u--form labelPosition="left" :model="formData" ref="uForm" labelWidth="170rpx" labelAlign="right"
				:rules="rules">
				<u-form-item label="设备编号：" prop="machineryCode" borderBottom ref="item1" :required="true">
					<u--input v-model="formData.machineryCode"  disabledColor="#ffffff" placeholder="请输入设备编号"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="设备名称：" prop="machineryName" borderBottom ref="item1" :required="true">
					<u--input v-model="formData.machineryName" disabledColor="#ffffff" placeholder="请输入设备名称"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="设备类型：" prop="userInfo.sex" borderBottom ref="item1" @click="shows = true">
					<u--input v-model="formData.machineryTypeName" disabled disabledColor="#ffffff" disabled=""
						placeholder="请选择设备类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="设备品牌：" prop="userInfo.sex" borderBottom ref="item1">
					<u--input v-model="formData.machineryBrand" disabledColor="#ffffff" placeholder="请输入设备品牌"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				</u-form-item>
				<u-form-item label="设备状态：" prop="userInfo.sex" borderBottom ref="item1" @click="zt = true">
					<u--input v-model="formData.statusName" disabled disabledColor="#ffffff" placeholder="请输入设备状态"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="购买日期：" prop="" borderBottom ref="item1" @click="open">
					<u--input v-model="formData.buytime" disabled disabledColor="#ffffff" placeholder="请选择时间"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="保修期限：" prop="userInfo.sex" borderBottom ref="item1">
					<u--input v-model="formData.warrantyPeriod" disabledColor="#ffffff" placeholder="请输入保修期限(单位:月)"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="供应商：" prop="userInfo.sex" borderBottom ref="item1">
					<u--input v-model="formData.supplier" disabledColor="#ffffff" placeholder="请选择供应商"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="所在车间：" prop="userInfo.sex" borderBottom ref="item1" @click="shop = true">
					<u--input v-model="formData.workshopName" :disabled="true" disabledColor="#ffffff" placeholder="请输入所在位置"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="管理员：" prop="userInfo.sex" borderBottom ref="item1">
					<u--input v-model="formData.charger" disabledColor="#ffffff" placeholder="请输入管理员"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u--form>

			<!-- 日期组件 -->
			<u-datetime-picker :show="show" mode="datetime" @cancel="cancel" @confirm="confirm"></u-datetime-picker>

			<!-- 按钮 -->
			<view class="button">
				<view class="button-left buuton-common">
					取消
				</view>
				<view class="button-right buuton-common" @click="submit">
					提交
				</view>
			</view>
		</view>

		<!-- 设备类型 -->
		<u-popup :show="shows" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					设备类型
				</view>
				<view class="container">
					<u-radio-group v-model="checkboxValue" placement="column" @change="checkboxChange" shape="circle"
						iconPlacement="right" activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList" :key="index"
							:label="item.machineryTypeName" :name="item.machineryTypeId">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="button">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 设备状态 -->
		<u-popup :show="zt" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					设备状态
				</view>
				<view class="container">
					<u-radio-group v-model="formData.statusCode" placement="column" @change="checkboxChange" shape="circle"
						iconPlacement="right" activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in ztList" :key="index"
							:label="item.statusName" :name="item.statusCode">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="ztbutton">
					确定
				</view>
			</template>
		</u-popup>
		<!-- 车间 -->
		<u-popup :show="shop" mode="center" @close="close" class="weizi">
			<template>
				<view class="popup-header" style="margin-bottom: 12rpx;">
					车间
				</view>
				<view class="container">
					<u-radio-group v-model="shopValue" placement="column" @change="checkboxChange" shape="circle"
						iconPlacement="right" activeColor="#38AFFF">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in workshop" :key="index"
							:label="item.workshopName" :name="item.workshopId">
						</u-radio>
					</u-radio-group>
				</view>
				<!-- 确定按钮 -->
				<view class="button" @click="button1">
					确定
				</view>
			</template>
		</u-popup>
	</view>
</template>

<script>
	import {
		timestampToTime
	} from '@/utils/timestamp'
	import {
		getParticulars
	} from '@/api/facilityInformation/book.js'
	import {
		listMachinerytype,
		getWorkshop,
		getStatus
	} from '@/api/mes/mes.js'
	import {
		putData
	} from '@/api/facilityInformation/compile.js'
	export default {
		data() {
			return {
				id:'',
				formData: {
					machineryCode:'',
					machineryName:''
				},
				shop:false,//车间
				show: false, //日期
				shows: false, //设备类型
				zt:false,//设备状态
				ztList:[],
				checkboxValue: '',
				shopValue:'',
				checkboxList: [], //设备类型
				workshop:[],//车间
				rules: {
					machineryCode: {
						type: 'string',
						required: true,
						message: '请输入设备编号',
						trigger: ['blur', 'change']
					},
					machineryName: {
						type: 'string',
						required: true,
						message: '请输入设备名称',
						trigger: ['blur', 'change']
					},
				}
			};
		},
		onLoad(options) {
			this.getParticulars(options.id)
			this.id = options.id
		},
		methods: {
			// 提交
			submit(){
				putData(this.formData).then(res => {
					uni.$u.toast('编辑成功')
					this.getParticulars(this.id)
				})
			},
			//设备类型选择确定按钮
			button() {
				this.checkboxList.forEach(item => {
					if (item.machineryTypeId == this.checkboxValue) {
						this.formData.machineryTypeName = item.machineryTypeName
					}
				})
				this.formData.machineryTypeId = this.checkboxValue
				this.close()
			},
			//车间选择确定按钮
			button1() {
				this.workshop.forEach(item => {
					if (item.workshopId == this.shopValue) {
						this.formData.workshopName = item.workshopName
					}
				})
				this.formData.workshopId = this.shopValue
				this.close()
			},
			// 获取设备信息回显
			getParticulars(id) {
				getParticulars(id).then(res => {
					this.formData = res.data
				})
				// 设备类型
				listMachinerytype().then(response => {
					response.data.splice(0, 1)
					this.checkboxList = response.data
				})
				// 车间列表
				getWorkshop().then(res => {
					this.workshop = res.data
				})
				// 设备状态列表
				getStatus().then(res=>{
					console.log(res);
					this.ztList = res.data
				})
			},
			// 打开选择日期
			open() {
				this.show = true
			},
			// 选择日期点击取消
			cancel() {
				this.show = false
			},
			// 选择日期点击确定
			confirm(e) {
				this.formData.time = timestampToTime(e.value)
				this.show = false
			},
			// 选择设备类型
			checkboxChange(n) {
				console.log(this.formData.statusCode);

			},
			// 状态确定
			ztbutton(){
				this.ztList.forEach(item=>{
					if(item.statusCode == this.formData.statusCode){
						this.formData.statusName = item.statusName
					}
				})
				this.close()
			},
			// 关闭弹出层
			close() {
				this.shows = false
				this.shop = false
				this.zt = false
			},
		}
	}
</script>

<style lang="scss">
	.newRepairs-box {
		margin: 32rpx;
		padding: 32rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
	}

	::v-deep .u-form-item {
		margin-bottom: 10rpx;
	}

	.button {

		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;

		.buuton-common {
			width: 296rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;

			/** 文本1 */
			font-size: 32rpx;
			font-weight: 400;
			line-height: 64rpx;
			text-align: center;
		}

		.button-right {
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			color: rgba(255, 255, 255, 1);
		}

		.button-left {
			border: 1px solid #38AFFF;
			color: rgba(32, 37, 64, 1);
		}
	}

	.u-page__tag-item {
		display: flex;
	}

	.u-transition {
		// padding: 24rpx !important;
	}




	::v-deep .weizi {
		.u-popup__content {
			// height: 500rpx !important;
			width: 690rpx !important;
			opacity: 1;
			border-radius: 20rpx !important;
			background: white;
		}

		.u-radio {
			margin-bottom: 48rpx !important;
		}

		.button {
			margin: 38rpx auto;
			width: 490rpx;
			height: 64rpx;
			opacity: 1;
			border-radius: 60rpx;
			background: linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%);
			font-size: 32Rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 64rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
		}

	}

	.container {
		height: 466rpx;
		/* 设置容器的固定高度 */
		overflow: auto;
		/* 添加滚动条 */
		border-bottom: 0.5px solid #f2f2f4;
	}

	// 多选框得边框颜色
	::v-deep .u-radio__icon-wrap--circle {
		border-color: rgba(56, 175, 255, 1) !important;
	}

	::v-deep .u-radio-group--column {
		padding: 0 32rpx;
	}

	::v-deep .u-form-item__body__left__content__label{
		font-size: 24rpx !important;
	}

	.popup-header {
		margin: 0 32rpx 32rpx 32rpx;
		border-bottom: 0.5px solid #f2f2f4;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(32, 37, 64, 1);
	}

	// -------------------------------
	// 弹出层样式
	::v-deep .u-page__tag-item {
		width: 160rpx !important;
		display: inline-block !important;

		uni-view {
			justify-content: center !important;
		}
	}

	::v-deep .u-tag--warning--plain {
		// border-radius: 12rpx;
		width: 160rpx !important;
		border: 0rpx solid #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag--warning {
		// opacity: 0.1;
		background-color: #fff !important;
		border-width: 1px !important;
		border-color: #38d6ff !important;
		margin-bottom: 32rpx !important;
		height: 64rpx !important;
	}

	::v-deep .u-tag__text--warning {
		color: #38d6ff !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag--square {
		width: 160rpx !important;
		border-radius: 6px !important;
		font-size: 32rpx !important;
	}

	::v-deep .u-tag__text--warning--plain {
		color: #202540 !important;
		font-size: 32rpx !important;
		margin: 0 auto !important;

	}
	
	// 校验星号
	::v-deep .u-form-item__body__left__content__required{
		left: 0 !important;
		top:0 !important;
	}
</style>